<!DOCTYPE html>
<html>
  <head>
    <title>用户A12313123123123123123123123</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
   
    <script type="text/javascript" src="resources/js/jquery-3.2.1.min.js"></script>

    <style>
    .div1{
    	border:1px solid gray;
    }
    .center{
    	text-align:center;
    	margin-bottom:10px;
    }
    .message_content{
    	border:1px solid blue;
    	height:300px;
    	width:800px;
    	overflow-y:scroll;
    	margin-left:200px;
    	margin-bottom:10px;
    }
    .div_left{
    	clear:both;
    	float:left;
    	margin:5px
    }
    .div_right{
    	clear:both;
    	float:right;
    	margin:5px
    }
    </style>
    
    <script>
		var str1="<div class='div_left'>";
		var str2="<span class='left_name'>";
		var str3="</span>";
		var str4="<span class='left_msg'>";
		var str5="</div>";
		
		var str11="<div class='div_right'>";
		var str22="<span class='right_name'>";
		var str33="<span class='right_msg'>";
		
    	$(function(){
    		//给按钮绑定用户咨询问题记录提交的动作
    		$("input[name=btn1]").click(function(){
    			 sendMsg();//点击发送问题消息
    		});
    		
    	});
    	
    	//发送用户消息到后端
    	function sendMsg(){
    		var user_name = $("#user_name").text();//用于表示某用户
			var opper_name = $("#opper_name").val();//用户表示绑定的客服
			var user_msg = $("input[name=msg]").val();
			
			var end = str1+str2+user_name+":"+str3+str4+user_msg+str3+str5;

			$(".message_content").append(end);//把咨询问题嵌入对话框
			$("input[name=msg]").val("");//清空咨询问题
			
			//通过ajax技术提交咨询问题，待用户接入，并回复
			$.ajax({
				type:"post",
				url:"messageServlet.do",
				data:{
					flag:"insert",
					user_name:user_name,
					opper_name:opper_name,
					user_msg:user_msg
				},
				dataType:"text",
				success:function(data){
					
					//定时刷新，定时ajax获取客服回复的消息记录
		    		setInterval(startReq,1000);
				}
			});
    	}
    	
    	
    	//获取客服回复的消息记录
    	function startReq(){
    		var user_name = $("#user_name").text();//用于表示某用户
    		var opper_name = $("#opper_name").val();//用户表示绑定的客服
    		
    		$.ajax({
				type:"post",
				url:"messageServlet.do",
				data:{
					flag:"userReqMsg",
					user_name:user_name
				},
				dataType:"json",
				success:function(data){
					//alert(typeof(data));
					//把获取到的客服消息记录嵌入到对话框
					for(var i=0;i<data.length;i++){
						if(opper_name==""){
							$("#opper_name").val(data[i].opper_name);
						}
						var end = str11+str22+data[i].message_info+str3+str33+":"+data[i].opper_name+str3+str5;
		    			$(".message_content").append(end);
					}
					
				}
			});
    	}
    	
    </script>
     
  </head>
  
  <body>
       <div class="div1">
            <div>
	       		<span id="user_name">用户A</span>
	       		<input type="hidden" id="opper_name"/>
	       </div>
       		<div class="center message_content">
<!--        			<div class="div_left"> -->
<!--        			<span class="left_name">用户A：</span> -->
<!--        			<span class="left_msg">您好！</span> -->
<!--        			</div> -->
<!--        			<div class="div_right"> -->
<!--        			<span class="right_msg">您好，客服001为您服务</span> -->
<!--        			<span class="right_name">：客服001</span> -->
<!--        			</div> -->
       		</div>
            <div class="center">
            	<span>请输入咨询内容:</span>
                <input name="msg" type="text" style="width:450px" />
            	<input name="btn1" type="button" value="提交" />
            	<input type="reset" value="重置" />
            </div>
       
       </div>
  </body>
</html>
